<template>
    <div id="root">
      <!-- 面包屑导航区 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>库存管理</el-breadcrumb-item>
        <el-breadcrumb-item>库存列表</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 卡片视图 -->
      <el-card>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getStockList">
              <!--<el-button slot="append" icon="el-icon-search" @click="getGoodsList"></el-button>-->
              <el-button slot="append" icon="el-icon-search" ></el-button>
            </el-input>
          </el-col>
          <el-col :span="4">
            <!--<el-button type="primary" @click="goAddPage">添加库存</el-button>-->
            <el-button type="primary" >添加库存</el-button>
          </el-col>
        </el-row>
        <!-- 表格数据 -->
        <el-table :data="stockList" border stripe >
          <el-table-column type="index"></el-table-column>
          <el-table-column label="商品代码" prop="code" width="140px"></el-table-column>
          <el-table-column label="商品名称" prop="name" width="100px"></el-table-column>
          <el-table-column label="颜色" prop="color" width="90px"></el-table-column>
          <el-table-column label="规格" prop="size" width="100px"></el-table-column>
          <el-table-column label="库存" prop="number" width="100px"></el-table-column>
          <el-table-column label="主分类" prop="master" width="90px"></el-table-column>
          <el-table-column label="分类" prop="branch" width="90px"></el-table-column>
          <el-table-column label="操作" width="130px">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit" size="mini" @click="updateStock(scope.row.id)"></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="removeById(scope.row.code)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页区域 -->
<!--        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pagenum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="queryInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          background
        ></el-pagination>-->
      </el-card>
<!--库存修改对话框-->
      <el-dialog title="修改库存信息" :visible.sync="dialogFormVisible">
        <el-form >
          <el-form-item label="库存" label-width="40px">
            <el-input v-model="number" autocomplete="off" type="number"></el-input>
          </el-form-item>
          <el-form-item label="颜色" label-width="120px">
            <el-select v-model="color" placeholder="请选择颜色" >
              <el-option :label="c.info" :value="c.tag" v-for="c in colorList" :key="c.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="尺寸" label-width="120px">
            <el-select v-model="size" placeholder="请选择尺寸">
              <el-option :label="s.info" :value="s.tag" v-for="s in sizeList" :key="s.id"></el-option>
            </el-select>

          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="update">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "Stock",
      data(){
          return{
            queryInfo:{},
            stockList:[],
            total:0,
          //  库存修改对话框
            dialogFormVisible: false,
            stock:{},
            number:'',
            color:'',
            size:'',
            colorList:[],
            sizeList:[]
          }
      },
      methods:{
        // 根据分页获取对应的商品列表
        async getStockList () {
          //todo:日后换分页查询
          const { data: res } = await this.$axios.post('stock/getUnSafeguardStock');
          if (!res.result) {
            return this.$message.error('获取库存列表失败！')
          }
          this.stockList = res.data;

        //  获取颜色和 尺寸
          this.$axios.get('/commodity/getCommodityColorSize')
            .then(resp=>{
              let result = resp.data.data;
              this.colorList = result['商品颜色']
              this.sizeList = result['商品尺寸']
            })
        },
        handleSizeChange (newSize) {
          this.queryInfo.pagesize = newSize
          this.getGoodsList()
        },
        handleCurrentChange (newSize) {
          this.queryInfo.pagenum = newSize
          this.getGoodsList()
        },
        // 通过Id删除商品
        async removeById (id) {
          const confirmResult = await this.$confirm(
            '此操作将永久删除该商品, 是否继续?',
            '提示',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }
          ).catch(err => err)
          if (confirmResult !== 'confirm') {
            return this.$message.info('已取消删除！')
          }
          const { data: res } = await this.$http.delete('goods/' + id)
          if (res.meta.status !== 200) {
            return this.$message.error('删除商品失败！')
          }
          this.$message.success('删除商品成功！')
          this.getGoodsList()
        },
        updateStock(id){
          const index = this.stockList.findIndex(data => data.id === id);
          this.stock = this.stockList[index];
          this.dialogFormVisible = true;
        },
        update(){
          this.stock['number'] = this.number;
          this.stock['size'] = this.size;
          this.stock['color'] = this.color;
          this.dialogFormVisible = false;
          this.$axios.post('/stock/updateById',this.stock)
            .then(resp=>{
              const result = resp.data.data;
              if (result.result){
                this.$message.success(result.message);
              }
              this.getStockList();
            })
        }
      },
      created() {
        this.getStockList();
      }
    }
</script>

<style scoped>

</style>
